<!DOCTYPE html>
<html>
<head>
	<title>幸运抽奖</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1{
			width:556px;
			height: 468px;
			background: url("1.PNG") no-repeat;
			border:2px solid;
			padding: 403px 130px 0px;
			box-sizing: border-box;
		}

		#btn1{
			display:inline-block; 
			width:300px;
			height: 50px;
			background: #abcdef;
			text-align: center;
			line-height: 50px;
			font-size: 30px;
			color:#fff;
		}
	</style>

	<script type="text/javascript">
		window.onload = function(){
			// 1.获取节点
			var btn1 = document.getElementById("btn1");
			// console.log(btn1);

			// 2.给节点加事件
			btn1.onclick = function(){
				// 生成随机数  乘以10并取整
				var num = Math.ceil(Math.random()*10);
				// console.log(num);
				if(num == 8){
					alert("恭喜你中了一等奖");
				}else if(num == 2 || num == 6){
					alert("恭喜你中了二等奖");
				}else if(num == 5){
					alert("恭喜你中了三等奖");
				}else{
					alert("不要灰心再来一次");
				}
			}

			// 作业1：用switch改写多重判断


		}//加载函数的回括号
	</script>
</head>
<body>
	<div class="div1">
		<button id="btn1">
			点击开始抽奖
		</button>
	</div>
</body>
</html>